<template>
    <div >
        <home-swiper :items = "items"></home-swiper>
        <home-recommend></home-recommend>
        <home-news-card :news-cats = "newsCats"></home-news-card>
        <home-hero-card :hero-cats = "heroCats"></home-hero-card>
    </div>
</template>

<script>
    import HomeSwiper from './childCmps/HomeSwiper'
    import HomeRecommend from './childCmps/HomeRecommend.vue'
    import HomeNewsCard from './childCmps/HomeNewsCard.vue'
    import HomeHeroCard from './childCmps/HomeHeroCard.vue'




    export default {
        name:'home',
        data () {
            return {
                items:[
                    {img:'//ossweb-img.qq.com/upload/adw/image/20200304/1c86348d9d7a0c06b8162f703e087613.jpeg'},
                    {img:'//ossweb-img.qq.com/upload/adw/image/20200304/654e2025b51f89efd0646f328fc86986.jpeg'},
                    {img:'//ossweb-img.qq.com/upload/adw/image/20200304/67d519d72697d6f7c636349979eb05dc.jpeg'},
                ],
                newsCats:[],
                heroCats:[],
                scrollY:0,
            }
        },
        beforeRouteLeave(to, from, next){ //离开前记录到顶部的距离
            this.scrollY = document.documentElement.scrollTop
            next()
        },
        activated(){
            window.scrollTo(0,this.scrollY || 0)
        },
        components: {
            HomeSwiper,
            HomeRecommend,
            HomeNewsCard,
            HomeHeroCard,
        },
        methods:{
            async fetchNewsCats(){
                const res = await this.$http.get('/news/list')
                this.newsCats = res.data
            },
            async fetchHeroCats(){
                const res = await this.$http.get('/heroes/list')
                this.heroCats = res.data
                
            },
            // 添加浏览过的文章
        },
        created() {
            this.fetchNewsCats()
            this.fetchHeroCats()
        }
    }
</script>

<style scoped lang="scss">
@import 'assets/scss/_variables.scss';


</style>